<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core">
<h:head>
	<title>PrimeFaces Slider</title>
</h:head>
<h:body>

	<h:form>
		<h3 style="margin-top: 0">Basic</h3>
		<p:tabView>
			<p:tab title="Serveurs Cloud">
				<h:panelGrid columns="2" cellpadding="5">

					<h3>VM</h3>
					<h:inputHidden id="number3" value="#{sliderView.number3}" />
					<p:slider for="number3" display="output" style="width: 200px">
						<p:ajax event="slideEnd" listener="#{sliderView.onSlideEnd}"
							update="number3" />
					</p:slider>
					<h:outputText id="output" value="#{sliderView.number3}" />
					
					<h3>Taille</h3>
					<h:inputHidden id="number2" value="#{sliderView.number2}" />
					<p:slider id="slider2" for="number2" step="50" style="width: 200px">
						<p:ajax event="slideEnd" listener="#{sliderView.onSlideEnd2}"
							update="taille" />
					</p:slider>
					<h:outputText id="taille" value="#{sliderView.taille}" />

					<h3>Disponibilité</h3>
					<h:inputHidden id="number1" value="#{sliderView.number1}" />
					<p:slider id="slider1" for="number1" step="50" style="width: 200px">
						<p:ajax event="slideEnd" listener="#{sliderView.onSlideEnd1}"
							update="disponibilite" />
					</p:slider>
					<h:outputText id="disponibilite"
						value="#{sliderView.disponibilite}" />

					<h3>Bande Passante</h3>
					<h:inputHidden id="number4" value="#{sliderView.number4}" />
					<p:slider id="slider4" for="number4" step="25" style="width: 200px">
						<p:ajax event="slideEnd" listener="#{sliderView.onSlideEnd3}"
							update="bande" />
					</p:slider>
					<h:outputText id="bande" value="#{sliderView.bande}" />

					<h3>Stockage</h3>
					<h:inputHidden id="number5" value="#{sliderView.number5}" />
					<p:slider id="slider5" for="number5" step="10" style="width: 200px">
						<p:ajax event="slideEnd" listener="#{sliderView.onSlideEnd4}"
							update="stockage" />
					</p:slider>
					<h:outputText id="stockage" value="#{sliderView.stockage}" />

					<h3>OS</h3>
					<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
						<p:selectOneRadio>
							<f:selectItem itemLabel="Windows Standard"
								itemValue="Windows Standard" />
							<f:selectItem itemLabel="Windows Entreprise"
								itemValue="Windows Entreprise" />
							<f:selectItem itemLabel="Redhat Serveur"
								itemValue="Redhat Serveur" />
							<f:selectItem itemLabel="Debian Serveur"
								itemValue="Debian Serveur" />
						</p:selectOneRadio>
					</h:panelGrid>

					<h3>Horaires</h3>
					<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
						<p:selectOneRadio>
							<f:selectItem itemLabel="Standard HO" itemValue="Standard HO" />
							<f:selectItem itemLabel="Horaires étendus"
								itemValue="Horaires étendus" />
							<f:selectItem itemLabel="24x7" itemValue="24x7" />
						</p:selectOneRadio>
					</h:panelGrid>

					<h3>Service</h3>
					<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
						<p:selectOneRadio>
							<f:selectItem itemLabel="Opéré" itemValue="Opéré" />
							<f:selectItem itemLabel="Administré" itemValue="Administré" />
						</p:selectOneRadio>
					</h:panelGrid>

					<h3>Options</h3>
					<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
					<p:selectBooleanCheckbox value="#{sliderView.bool1}"/>
					<h:outputText value="Option RAM x2" />	
					
					<p:selectBooleanCheckbox value="#{sliderView.bool1}"/>
					<h:outputText value="Pack IP (3 RIPs pour formule Start)" />
					
					<p:selectBooleanCheckbox value="#{sliderView.bool1}"/>
					<h:outputText value="Pack IP (1 VIP + 3 RIPs pour formule Entreprise/Critique)" />
					
					<p:selectBooleanCheckbox value="#{sliderView.bool1}"/>
					<h:outputText value="Firewall" />
					
					<p:selectBooleanCheckbox value="#{sliderView.bool1}"/>
					<h:outputText value="VPN" />
					
					<p:selectBooleanCheckbox value="#{sliderView.bool1}"/>
					<h:outputText value="Sauvegarde des serveurs virtuels" />
					
					<p:selectBooleanCheckbox value="#{sliderView.bool1}"/>
					<h:outputText value="Duplication des serveurs" />
					
					</h:panelGrid>

<!-- 					<h:outputText value="Pack IP (3 RIPs pour formule Start)" /> -->
<!-- 					<p:selectBooleanCheckbox value="#{selectBooleanView.value2}"> -->
<!-- 						<p:ajax update="msg" listener="#{selectBooleanView.addMessage}" /> -->
<!-- 					</p:selectBooleanCheckbox> -->

<!-- 					<h:outputText value="Pack IP (1 VIP + 3 RIPs pour formule Entreprise/Critique)" /> -->
<!-- 					<p:selectBooleanCheckbox value="#{selectBooleanView.value2}"> -->
<!-- 						<p:ajax update="msg" listener="#{selectBooleanView.addMessage}" /> -->
<!-- 					</p:selectBooleanCheckbox> -->

<!-- 					<h:outputText value="Firewall" /> -->
<!-- 					<p:selectBooleanCheckbox value="#{selectBooleanView.value2}"> -->
<!-- 						<p:ajax update="msg" listener="#{selectBooleanView.addMessage}" /> -->
<!-- 					</p:selectBooleanCheckbox> -->

<!-- 					<h:outputText value="VPN" /> -->
<!-- 					<p:selectBooleanCheckbox value="#{selectBooleanView.value2}"> -->
<!-- 						<p:ajax update="msg" listener="#{selectBooleanView.addMessage}" /> -->
<!-- 					</p:selectBooleanCheckbox> -->

<!-- 					<h:outputText value="Sauvegarde des serveurs virtuels" /> -->
<!-- 					<p:selectBooleanCheckbox value="#{selectBooleanView.value2}"> -->
<!-- 						<p:ajax update="msg" listener="#{selectBooleanView.addMessage}" /> -->
<!-- 					</p:selectBooleanCheckbox> -->

<!-- 					<h:outputText value="Duplication des serveurs" /> -->
<!-- 					<p:selectBooleanCheckbox value="#{selectBooleanView.value2}"> -->
<!-- 						<p:ajax update="msg" listener="#{selectBooleanView.addMessage}" /> -->
<!-- 					</p:selectBooleanCheckbox> -->

					<h:outputText value="Total price:#{sliderView.number9} MAD" />
				</h:panelGrid>
			</p:tab>
			<p:tab title="Stockage Cloud">
				<h:panelGrid columns="2" cellpadding="10">
					<p:graphicImage name="http://images.clipartpanda.com/cloud-icon-png-CloudIcon.png" />
					<h:outputText value="Francis Ford Coppola's legendary..." />
				</h:panelGrid>
			</p:tab>
			<p:tab title="Plateformes Cloud">
				<h:panelGrid columns="2" cellpadding="10">
					<p:graphicImage name="http://images.clipartpanda.com/cloud-icon-png-CloudIcon.png" />
					<h:outputText value="After a break of more than 15 years..." />
				</h:panelGrid>
			</p:tab>
			<p:tab title="Solutions Cloud">
				<h:panelGrid columns="2" cellpadding="10">
					<p:graphicImage name="http://images.clipartpanda.com/cloud-icon-png-CloudIcon.png" />
					<h:outputText value="After a break of more than 15 years..." />
				</h:panelGrid>
			</p:tab>

		</p:tabView>
	</h:form>

</h:body>
</html>